<route lang="json5">
{
  layout: 'default',
  style: {
    navigationBarTitleText: '',
  },
}
</route>

<template>
  <view @tap.stop="closeOutside">
    <z-paging
      ref="paging"
      :auto="false"
      v-model="dataList"
      @query="queryList"
      :show-loading-more-when-reload="true"
      height="100%"
      use-page-scroll
    >
      <block v-for="item in dataList" :key="item.id">
        <wd-swipe-action>
          <SettledCard :item="item"></SettledCard>
          <template #right>
            <view class="action">
              <view class="button" style="background: #ff2c3c" @tap="handleRoute(item)">
                <text>去导航</text>
              </view>
              <view class="button" style="background: #2ecc71" @tap="handleDetail(item.id)">
                <text>看车位</text>
              </view>
            </view>
          </template>
        </wd-swipe-action>
      </block>
    </z-paging>
  </view>
</template>

<script lang="ts" setup>
import { AjaxResultPageResulttingchechangliebiaoVo, tingchechangliebiaoVo } from '@/api/types'
import { listUsingGet1, findUsingGet } from '@/api/parkingLotController'
import SettledCard from './settled-card.vue'
import { useToast, useQueue } from 'wot-design-uni'
import { QqMapKey } from '@/config/key'

const paging = shallowRef<any>(null)
const dataList = ref([])
const currentPoint = ref<Constant.Point>({ latitude: 0, longitude: 0 })
const routePlan = requirePlugin('routePlan')

const { closeOutside } = useQueue()
/**
 * @description 车场列表
 * @param pageNo
 * @param pageSize
 */
const queryList = async (pageNo: number, pageSize: number) => {
  try {
    const res: AjaxResultPageResulttingchechangliebiaoVo = await findUsingGet({
      params: { page_no: pageNo, page_size: pageSize, ...currentPoint.value },
    })
    console.log('res:', res)

    const data = res.data
    paging.value.complete(data.lists)
  } catch (error) {
    paging.value.complete(false)
  }
}

const reloadPage = (point: Constant.Point) => {
  currentPoint.value = point
  console.log('传入参数：', currentPoint.value)

  paging.value.reload()
}

const handleRoute = (item: tingchechangliebiaoVo) => {
  // 使用在腾讯位置服务申请的key
  const key = QqMapKey
  // 调用插件的app的名称
  const referer = 'car_shop'
  // 是否启用智能规划
  const enableAI = true
  // 是否开启导航功能
  const navigation = 1
  // 终点
  const endPoint = JSON.stringify({
    // 终点
    name: item.name,
    latitude: item.latitude,
    longitude: item.longitude,
  })
  // 个性化图层
  const layerStyle = 1

  // 注意：2.0.0需路径填改为route-plan
  uni.navigateTo({
    url: `plugin://routePlan/index?key=${key}&referer=${referer}&endPoint=${endPoint}&enableAI=${enableAI}&navigation=${navigation}&layerStyle=${layerStyle}`,
  })
}

const handleDetail = (id) => {
  uni.navigateTo({ url: `/pages/settled-detail/settled-detail?id=${id}` })
}

defineExpose({
  reloadPage,
})
</script>

<style lang="scss" scoped>
.action {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 100%;
  padding: 0 11px;
  font-size: 28rpx;
  color: #ffffff;
  text-align: center;
}
</style>
